<template>
  <el-menu-item
    v-if="!item.children"
    :index="item.index"
    @click="handleItemClick(item)"
  >
    {{ item.title }}
  </el-menu-item>
  <el-submenu v-else :index="item.index">
    <template slot="title">{{ item.title }}</template>
    <nested-menu-item
      v-for="(subItem, index) in item.children"
      :key="index"
      :item="subItem"
    ></nested-menu-item>
  </el-submenu>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "nested-menu-item",
  props: ["item"],

  computed: mapState(["user"]),
  methods: {
    handleItemClick(item) {
      console.log(item);
      if (this.user.auth) {
        if (!item.children) {
          this.$router.push(item.path);
        }
      } else {
        if (!item.children) {
          this.$router.push("/404");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
